<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传递</title>
</head>
<body>
<div id="app">
    <h1>父：{{content}}</h1>
    <com :honus="title" @fu="jie"></com>
</div>
<template id="com">
    <div>
        <h2>子：{{honus}}</h2>
        <button @click="dianji">给父组件买辆车</button>
    </div>
</template>
<script src="../vue.js"></script>
<script>
    var com = {
        //有三种接值的写法 第一种
        props:['honus'],
        //第二种
        /*props:{
          honus:String,
        },*/
        //第三种
        /*props:{
            honus:{
                type:String,
            }
        },*/
        data(){
            return{
               cat :['保时捷1','保时捷2','保时捷3','保时捷4']
            }
        },
        methods:{
            dianji(){
                //     （这里方法名不能用驼峰）
                //如果需要传递多个，可以在参数后面继续添加实参
                // this.$emit('fu',this.cat）
                this.$emit('fu',/*this.cat*/'保时捷1','保时捷2')
            }
        },
        template:"#com"
    }
    new Vue({
        el:'#app',
        data(){
            return {
                title:'房子',
                content:''
            }
        },
        components:{
            com,
       },
        methods: {
            jie(val,val1){
                console.log(val);
                console.log(val1);
                this.content = val1;
            },
           /*
           第二种接值的写法
           jie(){
                //arguments 实参集合，类数组
                console.log(arguments);
                this.content = arguments[0];
            }*/
        }
    })
</script>
</body>
</html>